<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="changeVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="doGetPath()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script>
    var startRemainSeconds ;
    var endRemainSeconds;
    var timer;
    var goodId;
    var user;
    var socket;
    var uuid;
    $(function(){
        goodId = getQueryString("goodId");
        getGoodDetail(goodId);

    })
    function doGetPath(){
        if(!user){
            layer.msg("您未登录，请先登录.");
            return;
        }
        $.ajax({
            url:'/seckill/getPath',
            type:'POST',
            data:{goodId:goodId,verifyCode:$("#verifyCode").val()},
            success:function(data){
                if(data.code==200){
                    doSeckill(data.data);
                }else{
                    layer.msg(data.msg);
                }
            }
        })
    }
    function doSeckill(path){
       $.ajax({
           url:'/seckill/'+path+'/do_seckill',
           type:'POST',
           data:{goodId:goodId,uuid:uuid},
           success:function(data){
               if(data.code==200){
                    showLoading();
                   //if(!socket){
                   if(socket){
                       socket.close();
                   }
                   socket = createScoket(uuid);
                   //}
               }else{
                   layer.msg(data.msg);
               }
           }
       })
    }
    function getGoodDetail(goodId){
        $.ajax({
            url:'/goods/getGoodDetail?goodId='+goodId,
            success:function(data){
                if(data.code= 200){
                  initUser(data.data.user);
                  var good = data.data.good;
                  render(good);
                  initTime(good.startDate,good.endDate);
                  var state = show();
                  if(state==1 && user){
                      changeVerifyCodeImg();
                      $("#verifyCodeImg").show();
                      $("#verifyCode").show();
                  }
                  timer = window.setInterval(show,1000);
                }else{
                   layer.msg(data.msg);
                }
            }
        });
    }
    function changeVerifyCodeImg(){
        $("#verifyCodeImg").prop("src","/verifyCode?goodId="+goodId+"&timestamp="+new Date().getTime());
    }
    function initUser(userObj){
        user = userObj;
        if(!userObj){
            $("#userTip").show();
        }else{
            uuid = getUuid(user.id);
        }
    }
    function initTime(startDate,endDate){
        var beginDate = new Date(startDate);
        var endDate = new Date(endDate);
        var now = new Date();
        startRemainSeconds =  parseInt((beginDate.getTime()- now.getTime())/1000);
        endRemainSeconds = parseInt((endDate.getTime()- now.getTime())/1000);
    }
    function render(good){
        $("#goodName").html(good.goodName);
        $("#goodImg").prop("src",good.goodImg);
        $("#startDate").html(good.startDate);
        $("#goodPrice").html(good.goodPrice);
        $("#seckillPrice").html(good.seckillPrice);
        $("#stockCount").html(good.stockCount);
    }
    function show(){
        startRemainSeconds--;
        endRemainSeconds--;
        if(startRemainSeconds>0){
            //秒杀未开始
            $("#seckillTip").html(startRemainSeconds+"秒后开始抢购.");
            $("#buyButton").prop("disabled",true);
            return 0;
        }else if(endRemainSeconds>0){
            $("#seckillTip").html("秒杀进行中.");
            $("#buyButton").prop("disabled",false);
            return 1;
        }else{
            $("#seckillTip").html("秒杀已经结束");
            $("#buyButton").prop("disabled",true);
            window.clearInterval(timer);
            return 2;
        }
    }
</script>
</body>
</html>